<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <!--自动刷新网页(每五秒)-->
    <!--    <meta http-equiv="refresh" content="5">-->

    <!-- Required Stylesheets -->
    <link rel="stylesheet" type="text/css" href="css/reset.css" media="screen"/>
    <link rel="stylesheet" type="text/css" href="css/text.css" media="screen"/>
    <link rel="stylesheet" type="text/css" href="css/fonts/ptsans/stylesheet.css" media="screen"/>
    <link rel="stylesheet" type="text/css" href="css/fluid.css" media="screen"/>
    <link rel="stylesheet" type="text/css" href="css/mws.style.css" media="screen"/>
    <link rel="stylesheet" type="text/css" href="css/icons/icons.css" media="screen"/>

    <!-- Demo and Plugin Stylesheets -->
    <style type="text/css">
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="css/demo.css" media="screen"/>

    <link rel="stylesheet" type="text/css" href="plugins/colorpicker/colorpicker.css" media="screen"/>
    <link rel="stylesheet" type="text/css" href="plugins/jimgareaselect/css/imgareaselect-default.css" media="screen"/>
    <link rel="stylesheet" type="text/css" href="plugins/fullcalendar/fullcalendar.css" media="screen"/>
    <link rel="stylesheet" type="text/css" href="plugins/fullcalendar/fullcalendar.print.css" media="print"/>
    <link rel="stylesheet" type="text/css" href="plugins/tipsy/tipsy.css" media="screen"/>
    <link rel="stylesheet" type="text/css" href="plugins/sourcerer/Sourcerer-1.2.css" media="screen"/>
    <link rel="stylesheet" type="text/css" href="plugins/jgrowl/jquery.jgrowl.css" media="screen"/>
    <link rel="stylesheet" type="text/css" href="plugins/spinner/spinner.css" media="screen"/>
    <link rel="stylesheet" type="text/css" href="css/jui/jquery.ui.css" media="screen"/>
    <link rel="stylesheet" href="elementui/index.css">
    <!-- Theme Stylesheet -->
    <link rel="stylesheet" type="text/css" href="css/mws.theme.css" media="screen"/>

    <!-- JavaScript Plugins -->
    <script src="js/vue.js"></script>
    <script src="js/axios-0.18.0.js"></script>
    <script src="elementui/index.js"></script>
    <script src="node_modules/echarts/dist/echarts.min.js"></script>

    <title>Goreka</title>


</head>

<body>


<!-- Header Wrapper -->
<div id="mws-header" class="clearfix">
    <!-- Logo Wrapper -->
    <div id="mws-logo-container">
        <div id="mws-logo-wrap">
            <img src="images/mws-logo.png" alt="mws admin"/>
        </div>
    </div>
    <!-- User Area Wrapper -->
    <div id="mws-user-tools" class="clearfix">

    </div>
</div>


<!-- Main Wrapper -->
<div id="mws-wrapper">
    <!-- Necessary markup, do not remove -->
    <div id="mws-sidebar-stitch"></div>
    <div id="mws-sidebar-bg"></div>
    <!-- Sidebar Wrapper -->
    <div id="mws-sidebar">
        <!-- Main Navigation -->
        <div id="mws-navigation">
            <ul>
                <li class="active"><a href="index.html" class="mws-i-24 i-home">Application</a></li>
            </ul>
        </div>
        <!-- End Navigation -->
    </div>


    <!-- Container Wrapper -->
    <div id="mws-container" class="clearfix">
        <!-- Main Container -->
        <div class="container">
            <div id="app1" :model="version">
                <div class="mws-report-container clearfix">
                    <a class="mws-report" href="#">
                        <span class="mws-report-icon mws-ic ic-date"></span>
                        <span class="mws-report-content">
                        	<span class="mws-report-title">year</span>
                            <span class="mws-report-value" >{{version.year}}</span>
                        </span>
                    </a>
<!--                    <li class="mws-ic ic-clock-" title=".mws-ic .ic-clock-"></li>-->
                    <a class="mws-report" href="#">
                        <span class="mws-report-icon mws-ic ic-contrast"></span>
                        <span class="mws-report-content">
                        	<span class="mws-report-title">month</span>
                            <span class="mws-report-value">{{version.month}}</span>
                        </span>
                    </a>

                    <a class="mws-report" href="#">
                        <span class="mws-report-icon mws-ic ic-weather-sun"></span>
                        <span class="mws-report-content">
                        	<span class="mws-report-title">day</span>
                            <span class="mws-report-value">{{version.day}}</span>
                        </span>
                    </a>

                    <a class="mws-report" href="#">
                        <span class="mws-report-icon mws-ic ic-clock-"></span>
                        <span class="mws-report-content">
                        	<span class="mws-report-title">time</span>
                            <span class="mws-report-value ">{{version.time}}</span>
                        </span>
                    </a>

                    <a class="mws-report" href="#">
                        <span class="mws-report-icon mws-ic ic-car"></span>
                        <span class="mws-report-content">
                        	<span class="mws-report-title">status</span>
                            <span class="mws-report-value">{{version.status}}</span>
                        </span>
                    </a>
                </div>
            </div>



            <div class="mws-panel grid_5">
                <div class="mws-panel-header">
                    <span class="mws-i-24 i-graph">Charts</span>
                </div>
                <div class="mws-panel-body">
                    <div class="mws-panel-content">
                        <div id="mws-dashboard-chart" style="width:100%; height:250px;">
                            <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
                            <div id="main" style="width: 100%;height:250px;"></div>
                        </div>
                    </div>
                </div>
            </div>


            <div id="app2" class="mws-panel grid_3" :model="goreka">
                <div class="mws-panel-header">
                    <span class="mws-i-24 i-books-2">version</span>
                </div>
                <div class="mws-panel-body" style="padding: 15px" >
                    <ul class="mws-summary">
                        <li>
                            Author <span>{{goreka.author}}</span>
                        </li>
                        <li>
                            Version <span>{{goreka.version}}</span>
                        </li>
                        <li>
                            Model <span>{{goreka.model}}</span>
                        </li>
                        <li>
                            PublicationDate <span>{{goreka.publicationDate}}</span>
                        </li>
                        <li>
                            Company  <span>{{goreka.company}}</span>
                        </li>
                        <li>
                            Telephone  <span>{{goreka.telephone}}</span>
                        </li>
                    </ul>
                </div>
            </div>

            <div id="app">
                <div class="mws-panel grid_8 mws-collapsible">
                    <div class="mws-panel-header">
                        <span class="mws-i-24 i-table-1">service</span>
                    </div>
                    <div>
                        <el-table :data="dataList" style="width: 100%" :row-class-name="tableRowClassName">
                            <el-table-column prop="service_name" label="SERVICE NAME" align="center"></el-table-column>
                            <el-table-column prop="ip" label="IP" align="center"></el-table-column>
                            <el-table-column prop="port" label="PORT" align="center"></el-table-column>
                            <el-table-column prop="register_time" label="REGISTER TIME"
                                             align="center"></el-table-column>
                            <el-table-column prop="last_update_time" label="LAST UPDATE TIME"
                                             align="center"></el-table-column>
                            <el-table-column prop="status" label="STUATUS" align="center"></el-table-column>
                            <el-table-column prop="type" label="TYPE" align="center"></el-table-column>
                        </el-table>
                    </div>
                </div>
            </div>


        </div>
    </div>
    <!-- End Main Container -->

    <!-- Footer -->
    <div id="mws-footer">
        Copyright &copy; 2020.Company name All rights reserved.<a target="_blank"
                                                                  href="http://www.baidu.com/">瑞格企业</a>
    </div>
    <!-- End Footer -->

    <!-- End Container Wrapper -->
</div>
<!-- End Main Wrapper -->

<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    axios.get("/goreka/charts",).then((response) => {
        myChart.setOption({
            title: {
                text: 'GOREKA',
                subtext: '欢迎使用goreka!'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: ['Serving', 'Abnormal']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '8%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                boundaryGap: [0, 1]
            },
            yAxis: {
                type: 'category',
                data: ['Producer', 'Consumer']
            },
            series: [
                {
                    name: 'Serving',
                    type: 'bar',
                    data: response.data.serving
                },
                {
                    name: 'Abnormal',
                    type: 'bar',
                    data: response.data.abnormal
                }
            ]
        });
    });


    var vue1 = new Vue({
        el: '#app1',
        data: {
            version: {
                year: "2020",
                month: "2",
                day: "21",
                time: "18:00",
                status: "完美",
            },

        },
        created() {
            this.getStatus();

        },
        methods: {
            getStatus() {
                axios.get("/goreka/status").then((response) => {
                    var data = response.data;
                    this.version.year = data.year;
                    this.version.month = data.month;
                    this.version.day = data.day;
                    this.version.time = data.time;
                    this.version.status = data.status;
                });
            },

        }

    });


    var vue2 = new Vue({
        el: '#app2',
        data: {
            goreka: {
                author: "RUIGE",
                version: "2.0",
                model: "Bate",
                publicationDate: "2020-2",
                company: "Ruige Company",
                telephone: "188-8888-8888"
            },

        },
        created() {
            this.getVersion();

        },
        methods: {
            getVersion(){
                axios.get("/goreka/version").then((response) => {
                    this.goreka = response.data;
                });
            },

        }

    });


    var vue = new Vue({
        el: '#app',
        data: {
            dataList: [],
            version: {
                producer: "50",
            },

        },
        created() {
            this.findAll();
            this.updateCharts();
        },
        methods: {
            findAll() {
                axios.get("/goreka/findAll").then((response) => {
                    this.dataList = response.data.data;
                });
            },
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
        }

    });





</script>
</body>


</html>
